<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="wd-form-wrapper">
				<u-form-item label="课程名称" prop="name">
					<u-input type="text" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.name"></u-input>
				</u-form-item>
				<u-form-item label="课程类型" prop="course_category_text" :right-icon="formStatus?'arrow-right':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.course_category_text" @click="formItemClick('typeShow')"></u-input>
				</u-form-item>
				<u-form-item label="课程标签" prop="label" :right-icon="formStatus?'arrow-right':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}" :border-bottom="false">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.label" @click="formItemClick('labelShow')"></u-input>
				</u-form-item>
				<u-form-item label="课程老师" prop="teacher_name_text" :right-icon="formStatus?'arrow-right':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.teacher_name_text" @click="formItemClick('teacherShow')"></u-input>
				</u-form-item>
				<u-form-item label="课程时长（分）" prop="course_minutes">
					<u-input type="number" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.course_minutes"></u-input>
				</u-form-item>
				<u-form-item label="容纳人数（人）" prop="people_count">
					<u-input type="number" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.people_count"></u-input>
				</u-form-item>
				<u-form-item label="课程颜色" prop="color" :right-icon="formStatus?'arrow-right':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<view class="u-input__input" style="{color:formData.color?'#333333':'#999999'}" @click="formItemClick('colorShow')">
						<text v-if="formData.color" class="form-color" :style="{background: formData.color}"></text>
						<text v-else>请选择</text>
					</view>
				</u-form-item>
				<u-form-item label="课程难度" prop="degree">
					<view class="u-input__input">
						<u-rate v-model="formData.degree" inactive-icon="star-fill" inactive-color="#DFDFDF" active-color="#F5C822" size="26" gutter="6"></u-rate>
					</view>
				</u-form-item>
				
			</view>
			<view class="wd-form-wrapper">
				<u-form-item label="课程简介"></u-form-item>
				<u-form-item prop="description" :border-bottom="false">
					<u-input type="textarea" placeholder="暂无" placeholder-style="{color: '#999999'}" :clearable="false" maxlength="999" height="200" :auto-height="true" v-model="formData.description"></u-input>
				</u-form-item>
			</view>
			<view class="wd-form-wrapper">
				<view class="form-title">课程展示封面图</view>
				<u-upload ref="uUpload" :action="action" width="154" height="154" max-count="1" :auto-upload="true" :show-upload-list="true" :deletable="formStatus" :file-list="fileList" v-on:on-success="uploadImageSuccess" @on-remove="removeImage"></u-upload>
			</view>
		</u-form>
		
		<view class="wd-form-footer">
			<view class="wd-form-footer__btn" v-if="!formStatus">
				<u-button :custom-style="{height: '90rpx',background: 'rgba(0,0,0,0)',fontSize: '32rpx',color: '#6D4BBE'}" shape="circle" :ripple="true" @click="formStatus=true">编辑</u-button>
			</view>
			<!-- <view class="wd-form-footer__btn">
				<u-button :custom-style="{height: '90rpx',background: 'rgba(0,0,0,0)',fontSize: '32rpx',color: '#666666'}" shape="circle" :ripple="true" @click="submit">删除</u-button>
			</view> -->
			<view class="wd-form-footer__btn" v-if="formStatus">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">{{course_id?'保存':'确认新增'}}</u-button>
			</view>
			<view class="wd-form-footer__btn" v-if="course_id>0">
				<u-button :custom-style="{height: '90rpx',background: 'rgba(0,0,0,0)',fontSize: '32rpx',color: '#666666'}" shape="circle" :ripple="true" @click="deCourse">删除</u-button>
			</view>
		</view>
		
		<!-- 选择课程类型 -->
		<u-action-sheet v-model="typeShow" :list="typeList" @click="typeConfirm"></u-action-sheet>
		<!-- 课程老师 -->
		<u-action-sheet v-model="teacherShow" :list="teacherList" @click="teacherConfirm"></u-action-sheet>
		<!-- 选择课程标签 -->
		<u-popup v-model="labelShow" mode="bottom">
			<view class="popup-wrapper">
				<view class="popup-wrapper__title">
					<view style="color: #606266;" @click="labelShow=false">取消</view>
					<view>请选择课程标签</view>
					<view style="color: #2979ff;" @click="labelConfirm">确定</view>
				</view>
				<view class="popup-wrapper__body">
					<u-checkbox-group :wrap="true" style="display:block;width:100%;">
						<u-checkbox
							v-for="(item, index) in labelList" :key="index" 
							v-model="item.checked" :name="item.name"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</u-popup>
		<!-- 选择课程颜色 -->
		<u-popup v-model="colorShow" mode="bottom">
			<view class="popup-wrapper">
				<view class="popup-wrapper__title">
					<view style="color: #606266;" @click="colorShow=false">取消</view>
					<view>请选择课程颜色</view>
					<view style="color: #2979ff;" @click="colorConfirm">确定</view>
				</view>
				<view class="popup-wrapper__body" style="padding: 10rpx;">
					<text class="color" v-for="(item,index) in colorList" :key="index" :class="{'active':item.isSelect}" :style="{background: item.color}" @click="colorSelect(index)"></text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				course_id:0,
				action:'',
				formStatus: false,
				fileList:[],
				formData: {
					name: '',
					course_category_text: '',
					course_category_id:0,
					label: '',
					tag_ids:'',
					course_minutes: '',
					people_count: 0,
					color: '',
					color_id: 0,
					teacher_id:0,
					teacher_name_text:'',
					degree: 4,
					top_status:0,
					sort: '',
					description: '',
					image:''
				},
				rules: {
					name: [{ required: true, trigger: ['change','blur'], message: '请填写课程名称' }],
					type: [{ required: true, trigger: 'change', message: '请选择课程类型' }],
					// label: [{ required: true, trigger: 'change', message: '请选择课程标签' }],
					//duration: [{ required: true, trigger: ['change','blur'], message: '请填写课程时长' }],
					//people_count: [{ required: true, trigger: ['change','blur'], message: '请填写容纳人数' }],
					color: [{ required: true, trigger: 'change', message: '请选择课程颜色' }],
				},
				typeShow: false,
				typeList: [],
				teacherShow:false,
				teacherList:[],
				labelShow: false,
				labelList: [],
				colorShow: false,
				colorList: [],
			}
		},
		onLoad(options){
			this.action = getApp().globalData.apiUri+'/fitness.common/upload';
			if(options.course_id && options.course_id>0){
				this.course_id = options.course_id;
				this.fetchCourseDetail()
			}else{
				this.formStatus = true;
			}
			this.fetchCategory();
			this.fetchTags();
			this.fetchTeacher();
			this.fetchColors();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//获取分类
			fetchCategory(){
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				this.$core.get({url:'fitness.common/category',data:{shop_id:shop_id},success:(ret)=>{
					for(var i=0;i<ret.data.length;i++){
						ret.data[i].value = ret.data[i].id;
						ret.data[i].text = ret.data[i].name;
					}
					 this.typeList = ret.data;
				}});
			},
			//获取老师
			fetchTeacher(){
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				this.$core.get({url:'fitness.common/teacher',data:{shop_id:shop_id},success:(ret)=>{
					for(var i=0;i<ret.data.length;i++){
						ret.data[i].value = ret.data[i].id;
						ret.data[i].text = ret.data[i].name;
					}
					 this.teacherList = ret.data;
				}});
			},
			
			//获取标签
			fetchTags(){
				var that = this;
				let course_id = that.course_id;
				this.$core.get({url:'fitness.common/tag_list',data:{course_id:course_id},success:(ret)=>{
					for(var i=0;i<ret.data.length;i++){
						ret.data[i].value = ret.data[i].id;
						ret.data[i].label = ret.data[i].name;
						ret.data[i].checked = false;
					}
					 this.labelList = ret.data;
				}});
			},
			//获取颜色
			fetchColors(){
				var that = this;
				this.$core.get({url:'fitness.common/color_list',data:{},success:(ret)=>{
					for(var i=0;i<ret.data.length;i++){
						ret.data[i].color = ret.data[i].style;
						ret.data[i].isSelect = false;
					}
					that.colorList = ret.data;
				}});
			},
			
			//获取详情
			fetchCourseDetail(){
				let that = this;
				let course_id = that.course_id;
				that.$core.get({url:'fitness.manage/course_detail',data:{course_id:course_id},success:(ret)=>{
			
					ret.data.course_category_text = ret.data.course_category?ret.data.course_category.name : '';
					ret.data.teacher_name_text = ret.data.teacher?ret.data.teacher.name : ''
					ret.data.label = ret.data.tags;
					ret.data.color = ret.data.course_color.style || '';
					that.formData = ret.data;
					that.fileList = [{url:ret.data.image}]
				}});
			},
			
			formItemClick(name) {
				if (this.formStatus) {
					this[name] = true
				}
			},
			// 请选择课程类型
			typeConfirm(index) {
				this.formData.course_category_text = this.typeList[index].text;
				this.formData.course_category_id = this.typeList[index].value;
			},
			
			// 请选择标签
			labelConfirm(e) {
				let label = '';
				let tag_ids = ''
				this.labelList.map((val, index) => {
					if (val.checked) {
						label += label == '' ? val.label : ',' + val.label;
						tag_ids += tag_ids == '' ? val.value : ',' + val.value;
					}
				})
				this.formData.label = label;
				this.formData.tag_ids = tag_ids;
				this.labelShow = false
			},
			
			// 请选择课程老师
			teacherConfirm(index) {
				this.formData.teacher_name_text = this.teacherList[index].text;
				this.formData.teacher_id = this.teacherList[index].value;
			},
			colorSelect(index) {
				for (let i = 0; i < this.colorList.length; i++) {
					this.colorList[i].isSelect  = index==i?true:false;
				}
			},
			colorConfirm() {
				var that = this;
				this.colorList.map((val, index) => {
					if (val.isSelect) {
						that.formData.color = val.color;
						that.formData.color_id = val.id;
					}
				})
				this.colorShow = false
			},
			
			uploadImageSuccess(e){
				this.formData.image = e.data.fullurl;
			},
			removeImage(index, lists, name) {
				let fileList = this.fileList;
				fileList.splice(index, 1);
				this.fileList = fileList;
				this.formData.image = '';
			},
			deCourse(){
				var that = this;
				var course_id = that.course_id;
				that.$core.post({url:'fitness.manage/del_course',data:{course_id:course_id},success:(ret)=>{
						that.getOpenerEventChannel().emit("setSuccess",{})
						uni.showToast({title: ret.msg,icon: 'none',})
						uni.navigateBack({})
				}});
			},
			
			submit() {
				var that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var formData = that.formData;
						formData['course_id'] = that.course_id;
						formData['shop_id'] = shop_id;
						that.$core.post({url:'fitness.manage/set_course',data:formData,success:(ret)=>{
							that.getOpenerEventChannel().emit("setSuccess",{})
							uni.navigateBack({})
							uni.showToast({title: ret.msg,icon: 'none',})
						}});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.form-color {
		display: inline-block;
		vertical-align: middle;
		margin-top: -6rpx;
		width: 100rpx;
		height: 48rpx;
		border-radius: 12rpx;
	}
	.form-radio {
		/deep/ .u-radio-group {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		/deep/ .u-radio__label {
			display: flex;
			align-items: center;
			font-size: 26rpx;
		}
		/deep/ .u-input__input {
			text-align: center !important;
		}
	}
	.form-title {
		margin-bottom: 10rpx;
		line-height: 38rpx;
		font-size: 26rpx;
		color: #333333;
	}
	/deep/ .u-add-wrap {
		background: #FFFFFF !important;
	}
	.popup-wrapper {
		&__title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
		}
		&__body {
			display: flex;
			flex-wrap: wrap;
			max-height: 60vh;
			padding: 24rpx;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			/deep/ .u-checkbox {
				padding: 8rpx 0;
			}
			/deep/ .u-checkbox__label {
				flex: 1;
				margin-left: 24rpx;
			}
			.color {
				display: block;
				margin: 10rpx;
				width: 162rpx;
				height: 80rpx;
				border-radius: 24rpx;
				box-sizing: border-box;
				&.active {
					border: 4rpx #6D4BBE solid;
				}
			}
		}
	}
</style>